<template>
    <div>
        <!-- 添加 -->
        <el-button size="small" type="primary" @click="addHandler">添加</el-button>

        <!-- 表格 -->
        <el-table :data="privileges" style="width: 100%" size="small">
            <el-table-column type="expand">
                <template slot-scope="props" >
                    <el-table :data="props.row.children" :show-header="false" size="small" width="100%">
                        <el-table-column prop="name"></el-table-column>
                        <el-table-column prop="route"></el-table-column>
                        <el-table-column prop="type"></el-table-column>
                        <el-table-column >
                            <template slot-scope="scope">
                                <i class="el-icon-delete" @click="deleteHandler(scope.row.id)"></i>
                                <i class="el-icon-edit" @click="editHandler(scope.row)"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="name"> </el-table-column>
            <el-table-column label="路径" prop="route"> </el-table-column>
            <el-table-column label="类型" prop="type"> </el-table-column>
            <el-table-column label="操作" prop="desc">
                <template slot-scope="scope">
                    <i class="el-icon-delete" @click="deleteHandler(scope.row.id)"></i>
                    <i class="el-icon-edit" @click="editHandler(scope.row)"></i>
                </template>
            </el-table-column>
        </el-table>

        <!-- 莫太框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="路径">
                    <el-input v-model="form.route"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type" clearable>
                        <el-option label="菜单" value="menu"></el-option>
                        <el-option label="方法" value="method"></el-option>
                    </el-select>
                    <el-popover
                        placement="top-start"
                        title="提示"
                        width="300"
                        trigger="hover"
                        content="菜单控制着用户登录后可以动态显示的菜单树；方法为具体的权限，控制着是否可以调用某些接口">
                        <i class="el-icon-message-solid" slot="reference"></i>
                    </el-popover>
                </el-form-item>
                <el-form-item label="父权限">
                    <el-cascader v-model="form.parentId" :options="privileges" :props="{checkStrictly: true,children:'children',label:'name',value:'id'}" clearable ></el-cascader>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs'
export default {
    data() {
        return {
            privileges: [],
            title:'',
            dialogVisible: false,
            form: {},
            // privilegeProps:{children:'children',label:'name',value:'name'}
        }
    },
    created() {
        // 查询树
        this.findPrivilegeTree()
    },
    methods: {
        // 保存
        saveHandler() {     
            // 将parentId放到数组中
            this.form.parentId = this.form.parentId.toString().split(",")
            // this.form.parentId = this.form.parentId[0]
            if(this.form.parentId != "") {
                this.form.parentId = this.form.parentId[0]
            } else if(this.form.parentId == 'null') {
                this.form.parentId = ''
            }
            this.axios.post("/privilege/saveOrUpdate",qs.stringify(this.form)).then(res => {
                // console.log(res.data)
                // 更新
                this.findPrivilegeTree()
                this.dialogVisible = false
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
            })
        },

        // 添加
        addHandler() {
            this.dialogVisible = true
            this.title = "添加权限"
            this.form = {}
        },

        // 删除
        deleteHandler(id) {
            this.axios.delete("/privilege/deleteById",{params: {id}}).then(res => {
                if(res.data.status == 200) {
                    this.findPrivilegeTree()
                    this.$notify({
                        title: '成功',
                        message: res.data.message,
                        type: 'success'
                    });
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: res.data.message
                    });
                }
            })
        },
        
        // 修改
        editHandler(row) {
            this.title = "修改权限"
            this.dialogVisible = true
            this.form = row
        },

        // 查询树
        findPrivilegeTree() {
            this.axios.get("/privilege/findPrivilegeTree").then(res => {
                // this.privileges = res.data.data
                // 调用递归方法，去除级联数据后将数据赋值给级联选择器
                this.privileges=this.getTreeData(res.data.data);
            })
        },
        // 递归方法
        getTreeData(data){
            // 循环遍历json数据
            for(var i=0;i<data.length;i++){ 
                if(data[i].children.length<1){
                    // children若为空数组，则将children设为undefined
                    data[i].children=undefined;
                }else {
                    // children若不为空数组，则继续 递归调用 本方法
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        }
    }
}
</script>

<style scoped>
    .el-table__body >>> .el-table__expanded-cell[class*="cell"] {
        padding: 0 !important;
    }
    i {
        margin-right: .3rem;
    }
</style>